import { ChangeDetectionStrategy, Component } from '@angular/core';
import { MenuItem } from '@iux/live';

@Component({
  templateUrl: './collapse.component.html',
  styles: [
    `
      .ui-icon-btn {
        width: 32px;
        min-width: 32px;
        padding: 0;
      }
      .ui-icon-btn .lv-icon-host {
        width: 24px;
        height: 24px;
      }
      .ui-menu-title {
        display: flex;
        align-items: center;
      }
      .ui-menu-title .ui-logo {
        display: block;
        width: 24px;
        height: 24px;
        margin-right: 8px;
        background-size: 100%;
      }
      .ui-menu-title span {
        display: block;
      }
    `,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CollapseComponent {
  disabled = true;
  menus: MenuItem[] = [
    {
      id: '1',
      label: 'Menu 01',
      icon: 'icon-menu-home',
      items: [
        { id: '11', label: 'Item 1' },
        { id: '12', label: 'Item 2 long menu text Host-Based Intrusion Detection Service' },
        { id: '13', label: 'Item 3' },
        { id: '14', label: 'Item 4' },
      ],
    },
    {
      id: '2',
      label: 'Menu 02',
      icon: 'icon-menu-monitor',
    },
    {
      id: '3',
      label: 'Menu 03',
      icon: 'icon-menu-resource',
      items: [
        { id: '31', label: 'Item 5' },
        { id: '32', label: 'Item 6' },
        {
          id: '33',
          label: 'Item 7',
        },
        {
          id: '34',
          label: 'Item 8',
        },
      ],
    },
    {
      id: '4',
      label: 'Menu 04',
      icon: 'icon-menu-share',
      items: [
        {
          id: '41',
          label: 'Item 9',
        },
        {
          id: '42',
          label: 'Item 10',
        },
      ],
    },
  ];
  active = '12';
  collapsed = false;

  change() {
    this.collapsed = !this.collapsed;
  }
}
